﻿{extend name="layout/base" /}

{block name="meta"}
{__block__}
<style>
  .tabs-wrapper .tabs-group {
    padding: 0 60px 0 15px;
    position: relative;
    overflow-y: hidden;
  }
  .tabs-wrapper .tabs-group .title {
    float: left;
    padding: 15px 0;
    width: 100px;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
  }
  .tabs-wrapper .tabs-group .content {
    list-style: none;
    padding: 0;
    margin: 0 0 0 100px;
  }
  .tabs-wrapper .tabs-group .content > li {
    float: left;
    padding: 10px 12px;
  }
  .tabs-wrapper .tabs-group .content > li > a {
    display: block;
    padding: 5px 10px;
    border: none;
    -webkit-border-radius: 4px;
    -webkit-background-clip: padding-box;
    -moz-border-radius: 4px;
    -moz-background-clip: padding;
    border-radius: 4px;
    background-clip: padding-box;
    color: #919191;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
  }
  .tabs-wrapper .tabs-group .content > li.active > a,
  .tabs-wrapper .tabs-group .content > li:focus > a,
  .tabs-wrapper .tabs-group .content > li:hover > a {
    color: #43bc60;
  }
  .tabs-wrapper .tabs-group .tabs-toggle {
    position: absolute;
    right: 20px;
    top: 18px;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
  }
  .tabs-wrapper .tabs-group + .tabs-group {
    border-top: 1px dashed #e4ecf3;
  }

  .sorter .short-by ul {
    border: 0 none;
    margin-top:5px;
  }

  .sorter .short-by li.active a {
    color: #69bd43
  }
</style>
{/block}

{block name="body"}
<body class="shop_grid_page">
{/block}

{block name="main"}
  <!-- Breadcrumbs -->
  <div class="breadcrumbs">
    <div class="container">
      <div class="row">
        <div class="col-xs-12">
          <ul>
              <li class="home"> <a title="{:__('Go to Home Page')}" href="{:addon_url('mall')}">{:__('Home')}</a></li>
              {if empty($__CAT__)}
              <li>
                <span>&raquo;</span>
                <span><strong>  在线商品</strong></span>
              </li>
            {else/}
            <li>
              <span>&raquo;</span>
              <a href='{:addon_url("mall/goods/index",["id"=>$__CAT__["id"]])}'><strong>  {$__CAT__['simplename']}</strong></a>
            </li>
            {/if}
          </ul>
        </div>
      </div>
    </div>
  </div>
  <!-- Breadcrumbs End -->

  <!-- Main Container -->
  <div class="main-container col2-left-layout">
    <div class="container">
      <div class="row">
        <div class="col-main col-sm-9 col-xs-12 col-sm-push-3">

          {if !empty($__FILTERLIST__)}
          <div class="panel panel-default">
            <div class="panel-heading">
              <h3 class="panel-title">
                筛选
              </h3>
            </div>
            <div class="panel-body">
              <div class="tabs-wrapper">
                {mall:pagefilter id="filter" exclude=""}
                <div class="tabs-group">
                  <div class="title">{$filter.title}:</div>
                  <ul class="content clearfix">
                    {volist name="$filter.content" id="item"}
                    <li class="note-style {$item.active?'active':''}"><a href="{$item.url}">{$item.title}</a></li>
                    {/volist}
                  </ul>
                </div>
                {/mall:pagefilter}
                <!-- E 分类列表 -->
              </div>
            </div>
          </div>
          {/if}

          <div class="shop-inner">
            <div class="page-title">
              <h2> {:empty($__CAT__)?__("Categories"):$__CAT__['name']}</h2>
            </div>
            <div class="toolbar">
              <div class="view-mode">
                <ul>
                  <li class="active"> <a href="../shop/detail.html"> <i class="fa fa-th-large"></i> </a> </li>
                  <li> <a href="../shop/index.html"> <i class="fa fa-th-list"></i> </a> </li>
                </ul>
              </div>
              <div class="sorter">
                <div class="short-by">
                  <ul class="list-unstyled list-inline category-order clearfix">
                    <!-- S 排序 -->
                    {mall:pageorder id="order"}
                    <li class="{$order.active?'active':''}"><a href="{$order.url}">{$order.title}</a></li>
                    {/mall:pageorder}
                    <!-- E 排序 -->
                  </ul>
                </div>
                <div class="short-by page">
                  <label>{:__("Pagesize")}:</label>
                  <select id="pagesize" name="pagesize" onchange="changeUrlParam(this.options[this.options.selectedIndex].value,this.name)">
                    <option value="8" {if $pagesize == 8}selected{/if}>8</option>
                    <option value="16" {if $pagesize == 16}selected{/if}>16</option>
                    <option value="32" {if $pagesize == 32}selected{/if}>32</option>
                    <option value="64" {if $pagesize == 64}selected{/if}>64</option>
                  </select>
                </div>
              </div>
            </div>
            <div class="product-grid-area">
              <ul class="products-grid">
                {mall:pagelist id='vo'}
                <li class="item col-lg-3 col-md-4 col-sm-6 col-xs-6 ">
                  {include file="layout/item"}
                </li>
                {/mall:pagelist}

              </ul>
            </div>
            <div class="pagination-area ">
              {mall:pageinfo type="full" /}
            </div>
          </div>
        </div>
        <aside class="sidebar col-sm-3 col-xs-12 col-sm-pull-9">
          {include file="layout/sidebar"}
        </aside>
      </div>
    </div>
  </div>
  <!-- Main Container End -->
{/block}
{block name="js"}
{__block__}
<!-- flexslider js -->
<script type="text/javascript">

</script>

{/block}
